<page-header
  ng-if="ctrl.state.viewReady"
  title="'Namespace details'"
  breadcrumbs="[{ label:'Namespaces', link:'kubernetes.resourcePools' }, ctrl.pool.Namespace.Name]"
  reload="true"
></page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body classes="no-padding">
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
              <uib-tab-heading class="vertical-center"> <pr-icon icon="'layers'"></pr-icon> Namespace </uib-tab-heading>
              <form class="form-horizontal" autocomplete="off" name="resourcePoolEditForm" style="padding: 20px; margin-top: 10px">
                <!-- name-input -->
                <div class="form-group">
                  <div class="col-sm-12">
                    <table class="table">
                      <tbody>
                        <tr>
                          <td>Name</td>
                          <td>
                            {{ ctrl.pool.Namespace.Name }}
                            <span class="label label-info image-tag label-margins" ng-if="ctrl.isSystem">system</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <div class="col-sm-12 !p-0">
                  <annotations-be-teaser></annotations-be-teaser>
                </div>

                <!-- !name-input -->
                <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">Resource quota</div>
                <!-- quotas-switch -->
                <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="form-group">
                  <div class="col-sm-12 mt-2" ng-if="ctrl.state.resourceOverCommitEnabled">
                    <div class="form-group">
                      <div class="col-sm-3 col-lg-2">
                        <label class="control-label text-left"> Resource assignment </label>
                      </div>
                      <div class="col-sm-9 pt-2">
                        <label class="switch">
                          <input type="checkbox" ng-model="ctrl.formValues.HasQuota" />
                          <span class="slider round"></span>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div ng-if="ctrl.formValues.HasQuota">
                  <kubernetes-resource-reservation
                    ng-if="ctrl.pool.Quota"
                    description="Resource reservation represents the total amount of resource assigned to all the applications deployed inside this namespace."
                    cpu-reservation="ctrl.state.resourceReservation.CPU"
                    memory-reservation="ctrl.state.resourceReservation.Memory"
                    cpu-limit="ctrl.formValues.CpuLimit"
                    memory-limit="ctrl.formValues.MemoryLimit"
                    display-usage="ctrl.state.useServerMetrics"
                    cpu-usage="ctrl.state.resourceUsage.CPU"
                    memory-usage="ctrl.state.resourceUsage.Memory"
                  >
                  </kubernetes-resource-reservation>
                </div>
                <!-- !quotas-switch -->
                <div ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable">
                  <div class="col-sm-12 form-section-title"> Resource limits </div>
                  <div>
                    <div class="form-group">
                      <span class="col-sm-12 small text-warning" ng-switch on="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()">
                        <p class="vertical-center mb-0" ng-switch-when="true"
                          ><pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'"></pr-icon> At least a single limit must be set for the quota to be valid.
                        </p>
                        <p class="vertical-center mb-0" ng-switch-default></p>
                      </span>
                    </div>
                    <!-- memory-limit-input -->
                    <div class="form-group flex">
                      <label for="memory-limit" class="col-sm-3 col-lg-2 control-label vertical-center text-left"> Memory limit (MB) </label>
                      <div class="col-sm-6">
                        <por-slider
                          min="ctrl.ResourceQuotaDefaults.MemoryLimit"
                          max="ctrl.state.sliderMaxMemory"
                          step="128"
                          ng-if="ctrl.state.sliderMaxMemory"
                          value="ctrl.formValues.MemoryLimit"
                          on-change="(ctrl.handleMemoryLimitChange)"
                          visible-tooltip="true"
                          data-cy="k8sNamespaceEdit-memoryLimitSlider"
                        ></por-slider>
                      </div>
                      <div class="col-sm-2 vertical-center pt-6">
                        <input
                          name="memory_limit"
                          type="number"
                          data-cy="k8sNamespaceEdit-memoryLimitInput"
                          min="{{ ctrl.ResourceQuotaDefaults.MemoryLimit }}"
                          max="{{ ctrl.state.sliderMaxMemory }}"
                          class="form-control"
                          ng-model="ctrl.formValues.MemoryLimit"
                          id="memory-limit"
                          data-cy="k8sNamespaceEdit-memoryLimitInput"
                          required
                        />
                      </div>
                    </div>
                    <div class="form-group" ng-show="resourcePoolEditForm.memory_limit.$invalid">
                      <div class="col-sm-3 col-lg-2"></div>
                      <div class="col-sm-8 small text-warning">
                        <div ng-messages="resourcePoolEditForm.pool_name.$error">
                          <p class="vertical-center">
                            <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
                            {{ ctrl.state.sliderMaxMemory }}.
                          </p>
                        </div>
                      </div>
                    </div>
                    <!-- !memory-limit-input -->
                    <!-- cpu-limit-input -->
                    <div class="form-group">
                      <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU limit </label>
                      <div class="col-sm-8">
                        <por-slider
                          min="ctrl.ResourceQuotaDefaults.CpuLimit"
                          max="ctrl.state.sliderMaxCpu"
                          step="0.1"
                          ng-if="ctrl.state.sliderMaxCpu"
                          value="ctrl.formValues.CpuLimit"
                          on-change="(ctrl.handleCpuLimitChange)"
                          data-cy="k8sNamespaceEdit-cpuLimitSlider"
                          visible-tooltip="true"
                        ></por-slider>
                      </div>
                    </div>
                    <!-- !cpu-limit-input -->
                  </div>
                </div>
                <!-- #region LOADBALANCERS -->
                <div class="col-sm-12 form-section-title"> Load balancers </div>

                <div class="form-group">
                  <div class="col-sm-12 small text-muted">
                    <p class="vertical-center">
                      <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                      You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of
                      load balancers in this namespace.
                    </p>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <por-switch-field
                      data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
                      label="'Load Balancer quota'"
                      label-class="'col-sm-3 col-lg-2'"
                      name="'k8s-resourcepool-Lbquota'"
                      feature-id="ctrl.LBQuotaFeatureId"
                      checked="ctrl.formValues.UseLoadBalancersQuota"
                      on-change="(ctrl.onToggleLoadBalancersQuota)"
                    ></por-switch-field>
                  </div>
                </div>
                <!-- #endregion -->
                <div ng-if="ctrl.isAdmin && ctrl.isEditable && ctrl.state.ingressAvailabilityPerNamespace">
                  <!-- #region INGRESSES -->
                  <div class="col-sm-12 form-section-title"> Networking </div>
                  <ingress-class-datatable
                    ng-if="ctrl.state.ingressAvailabilityPerNamespace"
                    on-change-controllers="(ctrl.onChangeIngressControllerAvailability)"
                    ingress-controllers="ctrl.ingressControllers"
                    initial-ingress-controllers="$ctrl.initialIngressControllers"
                    description="'Enable the ingress controllers that users can select when publishing applications in this namespace.'"
                    no-ingress-controller-label="'No ingress controllers found in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster.'"
                    view="'namespace'"
                  ></ingress-class-datatable>

                  <!-- #endregion -->
                </div>
                <!-- #region REGISTRIES -->
                <div>
                  <div class="col-sm-12 form-section-title"> Registries </div>

                  <div class="form-group" ng-if="!ctrl.isAdmin || ctrl.isSystem">
                    <label class="col-sm-3 col-lg-2 control-label text-left" style="padding-top: 0"> Selected registries </label>
                    <div class="col-sm-9 col-lg-4"> {{ ctrl.selectedRegistries ? ctrl.selectedRegistries : 'None' }} </div>
                  </div>

                  <div ng-if="ctrl.isAdmin && !ctrl.isSystem">
                    <div class="form-group">
                      <div class="col-sm-12 small text-muted">
                        <p class="vertical-center">
                          <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                          Define which registries can be used by users who have access to this namespace.
                        </p>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-3 col-lg-2 control-label !pt-0 text-left" for="registries-selector"> Select registries </label>
                      <div class="col-sm-9 col-lg-4">
                        <create-namespace-registries-selector
                          input-id="'registries-selector'"
                          value="ctrl.formValues.Registries"
                          on-change="(ctrl.onRegistriesChange)"
                          options="ctrl.registries"
                        >
                        </create-namespace-registries-selector>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- #endregion -->

                <!-- #region STORAGES -->
                <div class="col-sm-12 form-section-title"> Storage </div>

                <div class="form-group">
                  <span class="col-sm-12 text-muted small">
                    <p class="vertical-center">
                      <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                      Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to
                      effectively prevent the usage of a specific storage option inside this namespace.
                    </p>
                  </span>
                </div>

                <div class="form-section-title text-muted col-sm-12" style="width: 100%">
                  <div class="vertical-center"> <pr-icon icon="'svg-route'"></pr-icon>standard </div>
                  <hr />
                </div>

                <storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"> </storage-class-switch>

                <!-- #endregion -->

                <!-- summary -->
                <kubernetes-summary-view
                  ng-if="resourcePoolEditForm.$valid && !ctrl.isUpdateButtonDisabled()"
                  form-values="ctrl.formValues"
                  old-form-values="ctrl.savedFormValues"
                ></kubernetes-summary-view>
                <!-- !summary -->

                <!-- actions -->
                <div ng-if="ctrl.isAdmin" class="col-sm-12 form-section-title"> Actions </div>
                <div ng-if="ctrl.isAdmin" class="form-group">
                  <div class="col-sm-12">
                    <button
                      type="button"
                      ng-if="!ctrl.isSystem"
                      class="btn btn-primary btn-sm !ml-0 !mr-1"
                      ng-disabled="!resourcePoolEditForm.$valid || ctrl.isUpdateButtonDisabled()"
                      ng-click="ctrl.updateResourcePool()"
                      button-spinner="ctrl.state.actionInProgress"
                    >
                      <span ng-hide="ctrl.state.actionInProgress" data-cy="k8sNamespaceEdit-updateNamespaceButton">Update namespace</span>
                      <span ng-show="ctrl.state.actionInProgress">Update in progress...</span>
                    </button>
                    <button
                      ng-if="!ctrl.isDefaultNamespace"
                      type="button"
                      class="btn btn-light btn-sm !ml-0"
                      ng-click="ctrl.markUnmarkAsSystem()"
                      button-spinner="ctrl.state.actionInProgress"
                      data-cy="k8sNamespaceEdit-markSystem"
                    >
                      <span ng-if="ctrl.isSystem">Unmark as system</span>
                      <span ng-if="!ctrl.isSystem">Mark as system</span>
                    </button>
                  </div>
                </div>
                <!-- !actions -->
              </form>
            </uib-tab>
            <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
              <uib-tab-heading class="vertical-center">
                <pr-icon icon="'history'"></pr-icon> Events
                <div ng-if="ctrl.hasEventWarnings()">
                  <pr-icon icon="'alert-triangle'" mode="'warning'" class-name="'mr-0.5'"></pr-icon>
                  {{ ctrl.state.eventWarningCount }} warning(s)
                </div>
              </uib-tab-heading>
              <resource-events-datatable namespace="ctrl.pool.Namespace.Name" storage-key="'kubernetes.resourcepool.events'"> </resource-events-datatable>
            </uib-tab>
            <uib-tab index="2" ng-if="ctrl.pool.Yaml" select="ctrl.showEditor()" classes="btn-sm">
              <uib-tab-heading class="vertical-center"><pr-icon icon="'code'"></pr-icon> YAML </uib-tab-heading>
              <div class="px-5" ng-if="ctrl.state.showEditorTab">
                <kube-yaml-inspector identifier="'namespace-yaml'" data="ctrl.pool.Yaml" data-cy="k8sNamespaceEdit-yamlEditor" hide-message="true" />
              </div>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div ng-if="ctrl.applications && ctrl.applications.length > 0">
    <kubernetes-namespace-applications-datatable dataset="ctrl.applications" on-refresh="(ctrl.getApplications)" is-loading="ctrl.state.applicationsLoading">
    </kubernetes-namespace-applications-datatable>
  </div>
</div>
